<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo1</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <input type="text" v-model="message">
    <ul>
      <li v-for="m in listArr2" :key="m.id">
        {{m.name}}---{{m.age}}---{{m.gender}}
      </li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el: "#demo",
    data() {
      return {
        message: "",
        listArr: [
          { id: '45556', name: '张三', gender: '男', age: "18" },
          { id: '45557', name: '李四', gender: '女', age: "18" },
          { id: '45558', name: '王五', gender: '女', age: "18" },
          { id: '45559', name: '赵六', gender: '男', age: "18" }
        ],
        listArr2: []
      }
    },
    // 添加监视属性
    watch: {
      message: {
        // 开启立即检测
        immediate: true,
        handler(value) {
          const result = this.listArr.filter(item => {
            return item.name.includes(value)
          })
          this.listArr2 = result;
        }
      }
    }
  })
</script>

</html>